<template>
  <el-table v-bind="$attrs" :data="tableData" style="width: 100%">
    <el-table-column v-for="item in columns" :key="item.prop" v-bind="item">
      <template v-if="$slots[item.prop]" #default="scope">
        <slot :name="item.prop" v-bind="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { toRefs, PropType } from 'vue';
import { ColumnItem } from './types/columns';
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array as unknown as PropType<ColumnItem[]>,
    default: () => [],
  },
});
const { tableData, columns } = toRefs(props);
</script>

<style scoped lang="scss"></style>
